package com.google.android.catalog.app.compose.gesture


import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Surface
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.google.android.catalog.framework.annotations.Sample
import kotlinx.coroutines.launch

@Sample(
    name = "Compose Gesture sample",
    description = "Shows how to add a compose target in the catalog",
    documentation = "https://github.com/google/casa-android#create-sample-modules"
)
@Composable
fun MainGestureSample() {
    // A surface container using the 'background' color from the theme
    Surface(
    color = MaterialTheme.colorScheme.background
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            HomeContent()
        }
    }
}


@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun HomeContent() {

    val pagerState: PagerState = rememberPagerState{tabList.size}

    val coroutineScope = rememberCoroutineScope()

    ScrollableTabRow(
        containerColor = Color(0xff03a9f4),
        contentColor = Color.White,
        edgePadding = 8.dp,
        // Our selected tab is our current page
        selectedTabIndex = pagerState.currentPage,
        // Override the indicator, using the provided pagerTabIndicatorOffset modifier
        indicator = {}
    ) {
        // Add tabs for all of our pages
        tabList.forEachIndexed { index, title ->
            Tab(
                text = { Text(title) },
                selected = pagerState.currentPage == index,
                onClick = {
                    coroutineScope.launch {
                        pagerState.animateScrollToPage(index)
                    }
                }
            )
        }
    }

    HorizontalPager(
        state = pagerState
    ) { page: Int ->
        when (page) {
            0 -> MoveMotionEventDemo()
            1 -> TransformMotionEventDemo()
            else -> TouchDelegateDemo()
        }
    }
}

internal val tabList =
    listOf(
        "Motion Events",
        "Transform Gestures",
        "TouchDelegate",
    )